<template>
	<view class="addChildDevices-page">
		<view class="nav" style="display: none;">
			<icon name="arrow-left" size="23px" color="#fff"  class="back-icon" @click="goback" />
			<view class="title">添加孩子设备</view>
		</view>
		
		<view class="top">
			<view class="pre">
				<view class="base-setup bg-white" :class="{ 'cancelActiveItem': current !== 0 }">
					<view class=" bg-greed-deep txt-white base-num">1</view>
					<view class="txt-greed base-txt">扫码下载孩子端</view>
				</view>
			</view>
			<view class="arrow">
				<image :src="iconName" style="width: 16px;height: 16px;"/>
			</view>
			<view class="next">
				<view class="base-setup bg-white" :class="{ 'cancelActiveItem': current !== 1 }">
					<view class="base-num bg-greed-deep txt-white">2</view>
					<view class=" txt-greed base-txt">绑定孩子设备</view>
				</view>
			</view>
		</view>
		
		<view class="qrcode">
			<view class="qrcode-top-bg"></view>
			<view class="qr-content">
				<view class="qr">
					<template>
						<uqrcode ref="uqrcodeRef" v-if="current === 0"  canvas-id="qrcode" :value="qrCodeUrl" :options="{ margin: 10 }" size="160"></uqrcode>
						<uqrcode ref="uqrcodeRef" v-else  canvas-id="qrcode" :value="qrCodeUrl" :options="{ margin: 10 }" size="160"></uqrcode>
					</template>
					
					<view class="down-tips">{{ title }}</view>
				</view>
				<view class="line"></view>
				<view class="desc">
					{{ des.p1}}
					<view>{{ des.p2}}</view>
				</view>
			</view>
		</view>
		
<!-- 		<view class="bind-qs">
			<view class="title">遇到绑定问题：</view>
			<view class="txt"> 1.查看家长端绑定学生端视频 <view class="link" @click="jumpage">《点击查看》</view></view>
			<view class="txt"> 2.客服企业微信 <view class="link"  @click="openServices">《微信客服》</view></view>
			<view class="txt"> 1.客服热线 <view class="link" @click="() => callPone('4008113985')">4008113985</view></view>
		</view> -->
		
		<view class="foolter-btn">
			<button class="next-setup" v-if="current === 0" style="width: 80%" @click="() =>changeCurrent(1)">下一步</button>
			<view class="last-stup" v-if="current === 1">
				<button class="pre-setup" style="width: 45%" @click="() =>changeCurrent(0)">上一步</button>
				<button class="finish-bind" style="width: 45%" @click="bindOver">完成绑定</button>
			</view>
		</view>
		<!-- <GlobalWebsocketNotice /> -->
	
	</view>
</template>

<script lang="ts" setup>
	import { computed, onMounted, ref, watch } from 'vue'
	// import GlobalWebsocketNotice from '@/components/globalWebsocketNotice/index.vue' // 进入首页，如果我分享连接后，朋友通过链接注册了，我会收到奖励
	import GiveVip from "@/components/giveVip/index.vue";
	import { vipServer } from '@/common/index'
	import {useParentInfo} from '@/stores/useParentInfo.js'
	import { onReady, onShow } from "@dcloudio/uni-app"
	import { global, mock } from "@/utils/index.ts"
	import { urlHelp } from '@/utils/index'
	import {useStudentListStore} from '@/stores/useStudentList.js'
	
	
	// import websocket from '@/utils/ws.js';
	// import { WEBSOCKET } from "@/utils/constant.js"
	
	const goback = () => {
		uni.setStorageSync('fromPage', 'addChildDevices'); // 使用同步存储
		uni.switchTab({
			url:"/pages/tabbar/home/index"
		})
	}
	


	
	const studentStore = useStudentListStore();
	const curStud = computed(() => studentStore.currentStudent || {});
	console.log("curStud", curStud.value)
	
	
	// const connectWS = () => {
	// 	const userInfo = global.syncGetUerInfoByLocal()
	// 	if(userInfo?.memberId){
	// 		console.log("首页链接ws", `${WEBSOCKET}${userInfo.memberId}`)
	// 		websocket.connectWebSocket(`${WEBSOCKET}${userInfo.memberId}`)
	// 		uni.$on("wxConnectStatus", (status) => {
	// 			console.log("是否连接成功", status)
	// 		})
	// 	}
	// }
	
	
	const parentStore = useParentInfo();
	console.log('parentStore', parentStore.parentInfo.id)		
	const current = ref(0);
	const iconName = computed(() => current.value === 0 ? '/static/icon/arrow.png' : '/static/icon/arrow-white.png')
	const qr = computed(() => current.value === 0 ? `http://app.3985.site/html/appdown/PGstudent_download.html?parentId=` : '')
	const title = computed(() => current.value === 0 ? '孩子端下载二维码' : '家长二维码')
	const des = computed(() => {
		let child = {
			p1: '请用孩子手机浏览器或微信扫此二维码下载对应的孩子端',
			p2: '如已下载孩子端点击【下一步】跳过此步骤'
		}
		let parent = {
			p1: '安装注册好孩子端后打开孩子端在首页【扫码绑定】扫码上面',
			p2: '家长二维码进行设备绑定链接'
		}  
		return current.value === 0 ? child : parent
	})
	const changeCurrent = (n: 0 | 1) => {
		current.value = n;
	}
	const uqrcodeRef = ref();
	// todo 正式环境需要替换
	const qrCodeUrl = computed(() => current.value === 0 ? `https://ghzsj.sh985.com/html/managMobile/studentDownload/index.html?parentId=${parentStore.parentInfo.id}` : parentStore.parentInfo.id)
	// const qrCodeUrl = computed(() => current.value === 0 ? `http://139.9.121.96:9995/?parentId=${parentStore.parentInfo.id}` : parentStore.parentInfo.id)
	
	const jumpage = () => {
		uni.navigateTo({
			url:"/pagesC/manual/index"
		})
	}
	
	const toVideoPage = () => {
		const { mobileBrand } = curStud.value as any
		urlHelp.mobileBrandToJumpPage(mobileBrand)
	}
	
	watch(current, (n,o) => {
		// toVideoPage()
	})
	onShow(() => {
		// connectWS()
		// toVideoPage()
	})
	
	onMounted(() => {	
		
		uqrcodeRef.value.remake({
		  success: () => {
			console.log('生成成功');
		  },
		  fail: err => {
			console.log(err)
		  }
		});
	})
	
	const bindOver = () => {	
		goback()
	}
	
	onReady(() => {
		
	})
	
	
	const openServices = () => {
		  // #ifdef MP-WEIXIN  
		  // 这里是微信小程序特有的代码  
		  wx?.openCustomerServiceChat({  
			extInfo: {  
			  url: 'https://work.weixin.qq.com/kfid/kfc7b21166a8a8542e0'  // 你可以根据需要传递额外的信息  
			},  
			corpId: 'wwa5aa0bdcad89bbc5', // 你的企业微信corpId  
			success(res) {  
			  console.log('成功打开客服聊天', res);  
			},  
			fail(err) {  
			  console.error('打开客服聊天失败', err);  
			}  
		  });  
		  // #endif 
		
	}
	
	const callPone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone //仅为示例
		})
	}
	
</script>
<style>
	page{
			background-color: #f7fbfe;
	}
</style>
<style lang="scss" scoped>
	.addChildDevices-page {
		background-color: #f7fbfe;
		.top {
			background-color: #2BC888;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 250upx;
			padding: 0 17upx;

			.base-setup {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 20upx 20upx;
				border-radius: 80upx;

				.base-num {
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
					text-align: center;
					line-height: 40upx;
					font-weight: bold;
				}

				.base-txt {
					margin-left: 20upx;
					font-weight: 800;
					font-size: 28upx;
				}
			}

			.bg-white {
				background-color: #fff;
			}
			.bg-greed-deep{
				background-color: #2BC888
			}

			.txt-greed {
				color: #2BC888;
			}
			.txt-white{
				color: #fff;
			}

			.pre {
				width: calc((100% - 60upx) / 2);
			}

			.arrow {
				width: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.next {
				width: calc((100% - 60upx) / 2);
			}
			
			
			.cancelActiveItem{
				background-color: #55d4a0;
				.base-num{
					background-color: #2bc887;
					color: #85eebf;
				}
				.base-txt{
					color: #88eac0;
				}
			}
		}
		
		
		
		.qrcode{
			margin:0  auto 40upx auto;
			width: calc(100% - 17upx - 17upx);
			padding-top: 80upx;
			height: 100%;
			// background: linear-gradient( 180deg, #e1f7ee 0%, #e1f7ee 5% #e6f9f1 10% #ebfaf4 12% #fbfefd 15% #fff 100%);
			background-color: #fff;
			border: 16upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-radius: 16upx;
			position: relative;
			top:-60upx;
			z-index: 10;
			.qrcode-top-bg{
				width: 100%;
				height: 60upx;
				background: linear-gradient(to bottom, #e5faf2, #e8fbf3, #fafefd);
				border-radius: 16upx;
				position: absolute;
				z-index: 11;
				top: 0;
			}
			.qr-content{	
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin: 0 auto;
				padding-bottom: 40upx;
			}
			.qr{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.down-tips{
					font-weight: 800;
					font-size: 28upx;
					color: #081A2A;
					margin: 60upx 0 30upx 0;
				}
			}
			.line{
				width: 100%;
				height: 1upx;
				border-top: 1upx dotted #ccc;
				margin-bottom: 40upx;
			}
			.desc{
				font-weight: 400;
				font-size: 24upx;
				line-height: 40upx;
				color: #999999;
				text-align: center;
			}
		}
		
		
		.bind-qs{
			padding: 17upx;
			border-radius: 16upx;
			background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 100%);
			border-radius: 16upx;
			border: 1px solid #FFFFFF;
			.title{
				font-weight: 800;
				font-size: 28upx;
				color: #081A2A;
				padding-bottom: 40upx;
			}
			.txt{
				display: flex;
				font-weight: 400;
				font-size: 24upx;
				color: #081A2A;
				line-height: 30upx;
				margin-bottom: 20upx;
				.link{
					color:#2BC888;
					margin-left: 10upx;
				}
			}
		}
		
		
		.foolter-btn{
			display: flex;
			justify-content: center;
			margin-top: 40upx;
			.last-stup{
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
		}

	}
	
	
	
	.nav{
		background-color: #2BC888;
		width: 100%;
		height: 70upx;
		padding-top: 110upx;
		position: relative;
		display: flex;
		justify-content: center;
		.back-icon{
			
		}
		.title{
			font-size: 30upx;
			color: #fff;
		}
	}
</style>


<style lang="scss">
	.foolter-btn{
		.van-button{
			width: 100%;
		}
	}
	
	.back-icon{
		 .van-icon{
			 position: absolute;
			left: 10upx;
			top: 104upx;
		 }
	}
	
	
	.next-setup{
		background-color: #2BC888;
		color: #fff;
		border:none !important;
		text-align: center;
		border-radius: 46upx;		
	}
	.finish-bind{
		background-color: #2BC888;
		border-radius: 46upx;
		color: #fff;
	}
	.pre-setup{
		background-color: #CCCCCC;
		border-radius: 46upx;
		color: #fff;
	}
</style>
